import {
  Carousel,
  Input,
  AutoComplete,
  Layout,
  Card,
  Col,
  Row,
  Spin,
  Pagination,
} from 'antd';
const { Sider, Content, Header, Footer } = Layout;
import {
  ClusterOutlined,
  RightOutlined,
  AlertOutlined,
  BellOutlined,
  ClockCircleOutlined,
  LikeOutlined,
} from '@ant-design/icons';
import './index.css';
import { connect } from 'react-redux';
import { useEffect, useState, useCallback } from 'react';
import {
  getHomeCategoriesInfo,
  getHomeListDataInfo,
} from '../../redux/actions';
import { getByHosname } from '../../api';
import { debounce, throttle } from 'lodash';
import { useNavigate } from 'react-router-dom';

const Home = (props) => {
  const navigate = useNavigate();
  const {
    getHomeCategoriesInfo,
    getHomeListDataInfo,
    hostypeList,
    districtList,
    list,
    pages,
    loading,
    listLoading,
    total,
  } = props;

  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [searchObj, setSearchObj] = useState({ hostype: '', districtCode: '' });
  const [hostype, setHostype] = useState('');
  const [districtCode, setDistrictCode] = useState('');
  const [options, setOptions] = useState([]);

  useEffect(async () => {
    await getHomeCategoriesInfo();
    await getHomeListDataInfo({ page, limit, searchObj });
  }, []);

  const onChangePage = (page) => {
    setPage(page);
  };

  useEffect(async () => {
    await getHomeListDataInfo({ page, limit, searchObj });
  }, [page, searchObj]);

  const onChangeHostype = (value) => {
    setHostype(value);
    setSearchObj({
      hostype: value,
      districtCode,
    });
    setPage(1);
  };

  const onChangeDistrict = (value) => {
    setDistrictCode(value);
    setSearchObj({
      hostype,
      districtCode: value,
    });
    setPage(1);
  };

  const searchResult = async (query) => {
    const result = await getByHosname(query);
    return result.map((_, idx) => {
      return {
        value: _.hoscode,
        label: (
          <div
            style={{
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <span>{_.hosname}</span>
          </div>
        ),
      };
    });
  };

  const onSelectHospital = (value) => {
    navigate(`hospital/registration/${value}`, { replace: true });
  };

  const onChangeSearch = async (value) => {
    const result = await searchResult(value);
    setOptions(value ? result : []);
  };

  // 利用防抖提升性能
  const onDebouncedChangeSearch = useCallback(
    debounce(onChangeSearch, 100),
    []
  );

  return (
    <div className='content-container'>
      <div className='content'>
        <Carousel>
          <img src='http://syt.atguigu.cn/_nuxt/img/web-banner1.b91d1a1.png'></img>
          <img src='http://syt.atguigu.cn/_nuxt/img/web-banner1.b91d1a1.png'></img>
          <img src='http://syt.atguigu.cn/_nuxt/img/web-banner1.b91d1a1.png'></img>
        </Carousel>
      </div>
      <div className='autocomplete-container'>
        <AutoComplete
          dropdownMatchSelectWidth={252}
          style={{ width: 800 }}
          options={options}
          onSelect={onSelectHospital}
          onSearch={onDebouncedChangeSearch}
        >
          <Input.Search size='large' placeholder='请输入医院名称' enterButton />
        </AutoComplete>
      </div>

      <div className='content-container'>
        <div className='content content-home'>
          <div className='content-left'>
            {loading ? (
              <Spin />
            ) : (
              <>
                <div className='list-title'>医院</div>
                <div className='list-nav'>
                  <ul>
                    <li>等级：</li>
                    {hostypeList.map((item) => {
                      return (
                        <li
                          key={item.id}
                          onClick={() => onChangeHostype(item.value)}
                          className={item.value === hostype ? 'activeMenu' : ''}
                        >
                          <a>{item.name}</a>
                        </li>
                      );
                    })}
                  </ul>
                </div>
                <div className='list-nav'>
                  <ul>
                    <li>地区：</li>
                    {districtList.map((item) => {
                      return (
                        <li
                          key={item.id}
                          onClick={() => onChangeDistrict(item.value)}
                          className={
                            item.value === districtCode ? 'activeMenu' : ''
                          }
                        >
                          <a>{item.name}</a>
                        </li>
                      );
                    })}
                  </ul>
                </div>
                {listLoading ? (
                  <Spin />
                ) : (
                  <div className='list-wrapper'>
                    <Row gutter={16}>
                      {list.map((item) => {
                        return (
                          <Col
                            span={12}
                            style={{ marginBottom: '10px' }}
                            key={item.id}
                          >
                            <Card
                              hoverable
                              bordered={true}
                              onClick={() => onSelectHospital(item.hoscode)}
                            >
                              <div className='hospital-container'>
                                <div className='hospital-msg'>
                                  <h3 className='hospital-title'>
                                    {item.hosname}
                                  </h3>
                                  <div className='hospital-content'>
                                    <span>
                                      <LikeOutlined className='hospital-icon' />
                                      {item.param.hostypeString}
                                    </span>
                                    <span>
                                      <ClockCircleOutlined className='hospital-icon' />
                                      每天{item.bookingRule.releaseTime}放号
                                    </span>
                                  </div>
                                </div>
                                <img
                                  src={
                                    'data:image/jpeg;base64,' + item.logoData
                                  }
                                  className='hospital-img'
                                />
                              </div>
                            </Card>
                          </Col>
                        );
                      })}
                    </Row>
                    <Pagination
                      defaultCurrent={page}
                      total={total}
                      onChange={onChangePage}
                    />
                    <div style={{ height: 10 }}></div>
                  </div>
                )}
              </>
            )}
          </div>
          <div className='content-right'>
            <div className='list-title'>
              <div>
                <ClusterOutlined style={{ color: '#a14c4c' }} />
                <span className='list-title-font'>常见科室</span>
              </div>
              <div>
                全部 <RightOutlined />
              </div>
            </div>
            <ul className='list-departments'>
              <li>神经内科</li>
              <li>消化内科</li>
              <li>呼吸内科</li>
              <li>内科</li>
              <li>神经外科</li>
              <li>妇科</li>
              <li>产科</li>
              <li>儿科 </li>
            </ul>

            <div className='list-title'>
              <div>
                <AlertOutlined style={{ color: '#7eacff' }} />
                <span className='list-title-font'>平台公告</span>
              </div>
              <div>
                全部 <RightOutlined />
              </div>
            </div>
            <ul className='list-news'>
              <li>
                <span className='list-point-blue'></span>
                <span className='list-news-text'>
                  关于延长北京大学国际医院放假的通知
                </span>
              </li>
              <li>
                <span className='list-point-blue'></span>
                <span className='list-news-text'>
                  北京中医药大学东方医院部分科室医生门诊医
                </span>
              </li>
              <li>
                <span className='list-point-blue'></span>
                <span className='list-news-text'>
                  武警总医院号源暂停更新通知
                </span>
              </li>
            </ul>

            <div className='list-title'>
              <div>
                <BellOutlined style={{ color: '#ffab51' }} />
                <span className='list-title-font'>停诊公告</span>
              </div>
              <div>
                全部 <RightOutlined />
              </div>
            </div>
            <ul className='list-news'>
              <li>
                <span className='list-point-yellow'></span>
                <span className='list-news-text'>
                  中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告
                </span>
              </li>
              <li>
                <span className='list-point-yellow'></span>
                <span className='list-news-text'>
                  首都医科大学附属北京潞河医院老年医学科门诊停诊公告
                </span>
              </li>
              <li>
                <span className='list-point-yellow'></span>
                <span className='list-news-text'>
                  中日友好医院中西医结合心内科门诊停诊公告
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    hostypeList: state.home.categories.hostypeList,
    districtList: state.home.categories.districtList,
    list: state.home.listData.list,
    pages: state.home.listData.pages,
    total: state.home.listData.total,
    loading: state.home.loading,
    listLoading: state.home.listLoading,
  };
};
const mapDispatchToProps = { getHomeCategoriesInfo, getHomeListDataInfo };
export default connect(mapStateToProps, mapDispatchToProps)(Home);
